<template>
	<uni-popup type="bottom" ref="roomRecord">
		<view class="roomRecord">
			<div class="header">
				<img @click="close" src="../static/close.svg" class="close-icon" alt="" srcset="">
				<text class="header-title">积分明细</text>
			</div>
			<div class="body">
				<div class="record-item" v-for="item in recordList">
					<div class="left">
						<text class="record-item-num color-red"
							:class="{'color-red':item.fromUser === userId ,'color-green':item.fromUser !== userId}">{{item.fromUser === userId?'-':'+'}}{{item.score}}</text>
						<text class="transfer-data">{{parseTime(item.createTime,"{y}-{m}-{d}")}}</text>
					</div>
					<div class="record-item-user">
						<div class="from-user item-user">

							<img :src="item.fromAvatar" class="avatar-wrapper" alt="" srcset="">
							<text class="user-name">{{item.fromNickname}}</text>
						</div>
						<img src="../static/transfer_icon.svg" class="transfer-icon" alt="" srcset="">
						<div class="to-user  item-user">

							<img :src="item.toAvatar" class="avatar-wrapper" alt="" srcset="">
							<text class="user-name">{{item.toNickname}}</text>
						</div>
					</div>
				</div>
			</div>
		</view>
	</uni-popup>
</template>

<script>
	import {
		getRoomLogByRoomId
	} from "../api/room.js"
	export default {
		name: "RoomRecordPopup",
		data() {
			return {
				recordList: []
			};
		},
		props: {
			roomId: Number
		},
		created() {

		},
		computed: {
			userId() {
				return this.$store.getters.userId
			}

		},
		methods: {
			open() {
				this.$refs.roomRecord.open()
				this.getRoomLogByRoomId()
			},
			close() {
				this.$refs.roomRecord.close()
			},
			getRoomLogByRoomId() {
				getRoomLogByRoomId({
					roomId: this.roomId
				}).then(result => {
					console.log("getRoomLogByRoomId", this.userId)
					this.recordList = result.data.filter(ele => ele.fromUser === this.userId || ele.toUser === this
						.userId)

				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.roomRecord::after {
		display: table;
		content: "";
		clear: both;
	}

	.roomRecord {
		background-color: white;
		border-top-left-radius: 30upx;
		border-top-right-radius: 30upx;
		padding-top: 24upx;

		.header {
			height: 80upx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;


			.header-title {
				font-size: 30upx;
				font-weight: bolder;
			}

			.close-icon {
				width: 40upx;
				height: 40upx;
				position: absolute;
				left: 24upx;
				top: 20upx;
			}

		}

		.body {
			height: 720upx;
			overflow-y: auto;
			padding-left: 40upx;
			padding-right: 40upx;
			padding-top: 20upx;
			padding-bottom: 20upx;
			background-color: #f2f7ff;

			.record-item {
				align-items: center;
				border-radius: 16upx;
				box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .1);
				display: -webkit-flex;
				display: flex;
				justify-content: space-between;
				margin: 8upx;
				padding: 16upx 32upx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left {
					display: flex;
					flex-direction: column;

					.record-item-num {
						font-family: D-DIN;
					}

					.transfer-data {
						color: #00000050;
						font-size: 24upx
					}

				}

				.record-item-user {
					align-items: center;
					display: flex;

					.transfer-icon {
						width: 40upx;
						height: 40upx;
						margin-left: 24upx;
						margin-right: 24upx;
					}

					.item-user {
						display: flex;
						flex-direction: column;
						align-items: center;

						.user-name {
							font-size: 26upx;
							font-weight: 600;
							overflow: hidden;

							text-align: right;
							text-overflow: ellipsis;

						}

						.avatar-wrapper {
							border-radius: 100%;
							box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2);
							height: 60upx;
							width: 60upx
						}
					}


				}

				.color-red {
					color: #e50808;
					font-size: 42upx;
					font-weight: 600
				}

				.color-green {
					color: #069f2a;
					font-size: 42upx;
					font-weight: 600
				}

			}

			.record-item:last-child {
				margin-bottom: 32upx;
			}



		}
	}
</style>